<template>
    <Modal class="model" v-model="show" @on-cancel="handleCancel(false)" title="回访详细" :mask-closable="false"
        width="80%">
        <Row>
            <Col span="18">
            <div class="title">回访信息</div>
            <Divider />
            <Form :model="formItem" :rules="formRule" :label-width="118" ref="formItem" class="return-form">
                <FormItem label="回访状态" required prop="radio">
                    <RadioGroup v-model="formItem.radio" @on-change="handleChangeRadio">
                        <Radio v-for="(method, index) in methodList" :key="index" :label="method.id" :disabled="+method.status === 0">{{ method.name }}
                        </Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="回访方式" required prop="radios">
                    <RadioGroup v-model="formItem.radios">
                        <Radio label="1">电话</Radio>
                        <Radio label="2">微信</Radio>
                        <Radio label="3">QQ</Radio>
                        <Radio label="4">其他</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="回访内容" prop="textarea">
                    <Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                        placeholder="请输入回访内容"></Input>
                </FormItem>
                <FormItem label="患者标签" prop="tag">
                    <Select v-model="formItem.tag" filterable multiple>
                        <OptionGroup v-for="(item, index) in tagList" :key="index" :label="item.name">
                            <Option v-for="(items, inum) in item.children" :value="items.id" :key="inum" :disabled="+items.status === 0">
                                {{ items.name }}</Option>
                        </OptionGroup>
                    </Select>
                </FormItem>
                <!-- <FormItem label="就诊类型" prop="select">
                    <Select v-model="formItem.select" disabled style="width:190px" clearable>
                        <Option v-for="(item, index) in typeList" :key="'type-' + index" :value="item.id">{{item.name}}
                        </Option>
                    </Select>
                </FormItem> -->
                <FormItem label="效果类型" prop="effect_type" v-if="!(is_vitiligo_not||is_first_initially)">
                    <RadioGroup v-model="formItem.effect_type" size="small">
                        <Radio :label="item.id" v-for="item in effect_type_list" :key="item.id" :disabled="+item.status === 0">{{item.name}}</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="风控类型" prop="risk_type">
                    <RadioGroup v-model="formItem.risk_type" size="small" @on-change="changerisktype()">
                        <Radio :label="item.id" v-for="item in risk_type_list" :key="item.id" :disabled="+item.status === 0">{{item.name}}</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="下次回访时间" prop="date" v-if="formItem.risk_type !=='50'">
                    <Input style="width:50px" v-model="time" @input="changeText($event)" type="number" />
                    <span style="margin:0 10px">天后</span>
                    <DatePicker type="datetime" placeholder="请输入回访时间" v-model="formItem.date" :options="dateOption"
                        @input="changeTexts"></DatePicker>
                </FormItem>
                <FormItem label="下次复诊时间" prop="date1">
                    <Input style="width: 50px" v-model="visitTime" @input="changeTextS($event)" type="number" />
                    <span style="margin:0 10px">天后</span>
                    <DatePicker type="datetime" placeholder="请输入复诊时间" v-model="formItem.date1" :options="dateOption"
                        @input="change" format="yyyy-MM-dd HH:mm:ss"></DatePicker>
                </FormItem>
            </Form>
            </Col>
            <Col span="6" class="side-bg">
            <div class="basic">
                <h3>{{itemData.name}} {{itemData.gender_str}} {{itemData.age}}岁</h3>
                <h4 class="b-phone">
                    <span>手机号：{{itemData.mobile}}</span>
                    <span>诊疗号：{{itemData.patient_card_id}}</span>
                </h4>
            </div>
            <div class="sky-screen">
                <row>
                    <Col span="16">
                    <DatePicker v-model="searchItem.date" @on-change="onSearchItem" clearable type="daterange"
                        placeholder="回访日期"></DatePicker>
                    </Col>
                    <Col span="8">
                    <Select v-model="searchItem.select" placeholder="岗位选择" @on-change="onSearchItem">
                        <Option v-for="(item, index) in postList" :key="'post'+ index" :value="item.id" :disabled="+item.status === 0">{{item.name}}
                        </Option>
                    </Select>
                    </Col>
                </row>
            </div>
            <Divider />
            <div class="side-message" v-if="itemList.length > 0">
                <Timeline>
                    <TimelineItem v-for="(items, index) in itemList" :key="'item'+index">
                        <p class="time">{{items.current_callback_time_str}}</p>
                        <p class="content">{{items.content}}</p>
                        <p class="consultant">
                            <span class="c-inr-right" v-if="items.profession_name">{{items.profession_name}}</span>
                            <span class="c-inr-right" v-if="items.member_name">{{items.member_name}}</span>
                            <Badge status="success" :text="items.callback_state" />
                            <span> &nbsp; </span>
                            <Badge status="success" color="orange" :text="items.callback_way" />
                        </p>

                    </TimelineItem>
                </Timeline>
            </div>
            <div v-else style="height: 300px;text-align: center">暂无回访信息</div>
            </Col>
        </Row>
        <div slot="footer">
            <Button @click="handleCancel(false)">取消</Button>
            <Button type="primary" :loading="loading" :disabled="isDisable" @click="handleOk('formItem')">确定</Button>
        </div>
    </Modal>
</template>
<script>
    import { formatWithYear } from '@/utils/datetime';
    import { CreateReturn, GetReturnItemList } from '@api/returnVisit';
    import { PatientUpdataDetail } from '@/api/patient'
    export default {
        data () {
            return {
                isDisable: false,
                visitTime: '',
                VisitTime: '',
                time: '',
                Time: '',
                TimeList: '',
                loading: false,
                show: false,
                searchItem: {
                    date: [],
                    select: '00'
                },
                formItem: {
                    input: '',
                    tag: [],
                    // select: '',
                    radio: '3',
                    radios: '1',
                    date: '',
                    date1: '',
                    textarea: '',
                    effect_type: '',
                    risk_type: ''
                },
                formRule: {
                    textarea: [
                        { required: true, message: '回访内容不能为空', trigger: 'blur' }
                    ],
                    date: [
                        { required: true, message: '下次回访日期不可为空' }
                    ],
                    effect_type: [
                        { required: true, message: '请选择效果类型', trigger: 'change' }
                    ],
                    risk_type: [
                        { required: true, message: '请选择风控类型', trigger: 'change' }
                    ]
                },
                postList: [{ id: '00', name: '全部岗位' }],
                taglist: [],
                itemData: {},
                itemList: [],
                tagList: [],
                typeList: [],
                methodList: [],
                effect_type_list: [], // 效果类型列表
                risk_type_list: [], // 风控类型列表
                dateOption: {
                    disabledDate (pick) {
                        const curDate = new Date();
                        curDate.setTime(curDate.getTime() - (3600 * 1000 * 24));
                        let reVal = 0;
                        if (pick < curDate) {
                            reVal = 1;
                        }
                        return reVal;
                    }
                },
                is_first_initially: false,
                is_vitiligo_not: false
            }
        },
        methods: {
            changeTextS (e) {
                this.visitTime = e
                let Current = new Date().getTime()
                let Return = e * 24 * 60 * 60 * 1000
                this.VisitTime = Current + Return
                let VisitTime = new Date(this.VisitTime);
                let y = VisitTime.getFullYear();
                let m = VisitTime.getMonth() + 1;
                let d = VisitTime.getDate();
                let h = VisitTime.getHours();
                let mm = VisitTime.getMinutes();
                let s = VisitTime.getSeconds();
                this.formItem.date1 = y + '-' + (m) + '-' + (d) + ' ' + (h) + ':' + (mm) + ':' + (s);
            },
            changeText (e) {
                this.time = e
                let CurrentDate = new Date().getTime()
                let ReturnDate = e * 24 * 60 * 60 * 1000
                this.Time = ReturnDate + CurrentDate
                this.format(this.Time)
            },
            format (data) {
                let time = new Date(data);
                let y = time.getFullYear();
                let m = time.getMonth() + 1;
                let d = time.getDate();
                let h = time.getHours();
                let mm = time.getMinutes();
                let s = time.getSeconds();
                this.formItem.date = y + '-' + (m) + '-' + (d) + ' ' + (h) + ':' + (mm) + ':' + (s);
            },
            handleShow (row, types, tags, status) {
                this.show = true;
                this.itemData = {}
                this.itemData = row
                this.typeList = types;
                this.tagList = tags;
                // this.formItem.select = this.filterId(row.outpatient_name, types);
                this.formItem.date = row.next_callback_time_str ? new Date(row.next_callback_time_str) : '';
                this.formItem.date1 = row.next_revisiting_time_str
                this.formItem.data1 = formatWithYear(this.formItem.date1)
                this.getEditDetail(row.id, status)
                this.handleLoad(row);
            },
            handleChangeRadio (id) {
                let obj = this.methodList.filter(item => item.id === id)
                if (obj && obj[0].name === '已到院') {
                    this.formItem.textarea = '已到院'
                } else {
                    this.formItem.textarea = ''
                }
            },
            getEditDetail (id, status = 3) {
                PatientUpdataDetail({ id, edit_type: status }).then(res => {
                    this.is_first_initially = res.is_first_initially
                    this.is_vitiligo_not = res.is_vitiligo_not
                    this.formItem.tag = res.tags_ids
                    this.methodList = res.condition.callback_status_list
                    this.effect_type_list = res.condition.effect_type_list
                    this.risk_type_list = res.condition.risk_type_list
                    let obj = res.condition.callback_status_list.filter(item => item.name === '正常回访')
                    this.formItem.radio = obj[0].id
                    this.formItem.date1 = res.next_revisiting_time || ''
                    this.formItem.effect_type = res.effect_type_id || ''
                    this.formItem.risk_type = res.risk_type_id || ''
                    if (res.is_show_medical === 1 && res.is_show_customer === 0) {
                        // 医助
                        this.formItem.date = res.yz_next_callback_time
                    } else if (res.is_show_medical === 0 && res.is_show_customer === 1) {
                        // 客服
                        this.formItem.date = res.kf_next_callback_time
                    } else {
                        this.formItem.date = ''
                    }
                    this.changerisktype()
                })
            },
            filterId (name, types) {
                let reVal = ''
                if (types && types.length > 0) {
                    types.forEach(type => {
                        if (type.name === name) {
                            reVal = type.id;
                        }
                    })
                }
                return reVal;
            },
            handleLoad (row) {
                const params = {
                    patient_user_id: this.itemData.id,
                    start_time: this.searchItem.date[0] && this.formDate(this.searchItem.date[0]),
                    end_time: this.searchItem.date[1] && this.formDate(this.searchItem.date[1]),
                    profession_id: this.searchItem.select === '00' ? '' : this.searchItem.select,
                    page: 0,
                    pageSize: 0
                }
                GetReturnItemList(params).then((res) => {
                    this.itemList = res.list
                    if (this.postList.length === 1) {
                        const postList = res.condition.permission_list
                        this.postList = this.postList.concat(postList);
                    }
                }).catch(() => { })
            },
            handleCancel (val) {
                this.show = false;
                this.$refs['formItem'].resetFields()
                this.searchItem = {
                    date: [],
                    select: '00'
                }
                if (val) {
                    this.$emit('updateShow', true)
                }
            },
            handleOk () {
                this.isDisable = true
                setTimeout(() => {
                    this.isDisable = false
                }, 5000)
                if (this.formItem.textarea === '') {
                    this.isDisable = false
                }
                if (this.formItem.risk_type !== '50') {
                    if (this.formItem.date && this.formItem.date < new Date()) {
                        this.$Message.warning('下次回访时间已过期，请重新选择！')
                        this.isDisable = false
                        return;
                    }
                } else {
                    this.formItem.date = ''
                }
                if (this.formItem.date1 && this.formItem.date1 < new Date()) {
                    this.$Message.warning('下次复诊时间已过期，请重新选择！')
                    this.isDisable = false
                    return;
                }
                const params = {
                    patient_id: this.itemData.id,
                    callback_state_id: this.formItem.radio,
                    callback_way_id: this.formItem.radios,
                    content: this.formItem.textarea,
                    next_callback_time: this.formItem.date,
                    next_fuzhen_time: this.formItem.date1,
                    // outpatient_type_id: this.formItem.select,
                    tags_ids: this.formItem.tag.join(','),
                    effect_type: this.formItem.effect_type,
                    risk_type: this.formItem.risk_type,
                    is_vitiligo_not: this.is_vitiligo_not,
                    is_first_initially: this.is_first_initially
                }
                CreateReturn(params).then((res) => {
                    this.$Message.success(' 提交回访成功');
                    this.loading = false;
                    this.handleCancel(true);
                }).catch(() => {
                    this.loading = false;
                })
            },
            onSearchItem () {
                this.handleLoad();
            },
            formDate (date) {
                return formatWithYear(date, '-')
            },
            changeTexts (e) {
                let CurrentDate = new Date().getTime()
                let ReturnDate = new Date(e).getTime()
                let Time = ReturnDate - CurrentDate
                let day = Math.ceil(Time / 1000 / 60 / 60 / 24)
                this.time = day
            },
            change (e) {
                let CurrentDate = new Date().getTime()
                let ReturnDate = new Date(e).getTime()
                let Time = ReturnDate - CurrentDate
                let day = Math.ceil(Time / 1000 / 60 / 60 / 24)
                this.visitTime = day
            },
            changerisktype () {
                if (this.formItem.risk_type !== '50') {
                    this.formRule.date[0].required = true
                } else {
                    this.formRule.date[0].required = false
                }
            }
        },
        filters: {
            handleState (val = '') {
                let reVal = '';
                if (val) {
                    const value = parseInt(val, 10)
                    if (value === 1) {
                        reVal = '未接通';
                    } else if (value === 2) {
                        reVal = '微信拉黑';
                    } else if (value === 3) {
                        reVal = '正常回访';
                    } else if (value === 4) {
                        reVal = '已到院';
                    }
                }
                return reVal
            }
        }
    }
</script>
<style scoped lang="less">
    .time {
        font-size: 14px;
        font-weight: bold;
    }

    .content {
        padding: 10px 0;
    }

    .consultant {
        color: #9ea7b4;
    }

    .c-inr {
        margin: 0 10px;
    }

    .c-inr-right {
        margin-right: 10px;
    }

    .b-phone {
        line-height: 26px;
        font-size: 12px;
    }

    h4 span {
        margin-left: 5px;
    }

    .side-bg {
        background: #f2f2f2;
        padding: 24px !important;
        height: 570px;
        max-height: 570px;
    }

    .return-form {
        padding: 24px;
    }

    .title {
        font-weight: bold;
        font-size: 16px;
        padding: 24px 0 0 24px;
    }

    .sky-screen {
        margin-top: 16px;
    }

    .model .ivu-modal-body {
        padding: 0px;
    }
    /deep/.ivu-modal{
        top: 37px!important;
    }
    .side-message {
        max-height: 370px;
        overflow-y: auto;
    }

    /*/deep/.ivu-modal .side-message {*/
    /*    /deep/.ivu-select-dropdown {*/
    /*        position: fixed !important;*/
    /*        right: 120px;*/
    /*        top: 322px !important;*/
    /*        left: inherit !important;*/
    /*    }*/
    /*}*/
</style>
